<script setup lang="ts">
import SysDialog from "@/components/SysDialog.vue";
import { nextTick, onMounted, reactive, ref } from "vue";
import useDialog from "@/hooks/useDialog";
import { ElMessage, type FormInstance } from "element-plus";
import {
  addMenuApi,
  deleteMenuApi,
  getMenuListApi,
  getParentMenuListApi,
  updateMenuApi,
} from "@/apis/menu";
import type { MenuModel } from "@/apis/menu/MenuModel";
import useInstance from "@/hooks/useInstance";
//获取全局实例
const { global } = useInstance();
const dialog = useDialog().dialog;
const addRef = ref<FormInstance>();
const tags = ref("0");
const addBtn = () => {
  tags.value = "0";
  dialog.title = "新增菜单";
  dialog.visible = true;
  getParent();
  addRef.value?.resetFields();
};
const addModel = reactive<MenuModel>({
  id: "",
  pid: "",
  title: "",
  code: "",
  path: "",
  type: "0",
  name: "",
  sort: 0,
  pidname: "",
  url: "",
  icon: "",
});
const commit = () => {
  addRef.value?.validate(async (valid) => {
    if (!valid) return;
    let res = null;
    if (tags.value === "0") {
      res = await addMenuApi(addModel);
    } else {
      res = await updateMenuApi(addModel);
    }
    if (res.code == 200) {
      ElMessage.success(res.msg);
      getList();
      dialog.visible = false;
    }
  });
};
const treelist = ref([]);
const getParent = async () => {
  let res = await getParentMenuListApi();
  if (res.code == 200 && res) {
    treelist.value = res.data;
  }
};
const rules = reactive({
  title: [{ required: true, message: "请输入菜单名称", trigger: "blur" }],
  code: [{ required: true, message: "请输入菜单编码", trigger: "blur" }],
  path: [{ required: true, message: "请输入菜单路径", trigger: "blur" }],
  sort: [{ required: true, message: "请输入菜单序号", trigger: "blur" }],
  url: [{ required: true, message: "请输入请求地址", trigger: "blur" }],
  icon: [{ required: true, message: "请输入菜单图标", trigger: "blur" }],
  name: [{ required: true, message: "请输入路由名称", trigger: "blur" }],
  pid: [{ required: true, message: "请选择上级菜单", trigger: "blur" }],
});
const treeClick = (data: any) => {
  addModel.pidname = data.title;
};
const handleEdit = (row: any) => {
  tags.value = "1";
  dialog.title = "编辑菜单";
  dialog.visible = true;
  getParent();
  nextTick(() => {
    Object.assign(addModel, row);
    addModel.type = row.type + "";
  });
};
const handleDelete = async (id: string) => {
  const confim = await global.$myconfig("确认删除吗?");
  console.log(confim);
  if (confim) {
    let res = await deleteMenuApi(id);
    if (res && res.code == 200) {
      ElMessage.success(res.msg);
      getList();
    } else {
      ElMessage.error(res.msg);
    }
  }
};
const tableList = ref([]);

const getList = async () => {
  let res = await getMenuListApi();
  if (res && res.code == 200) {
    tableList.value = res.data;
  }
};
onMounted(() => {
  getList();
});
</script>

<template>
  <el-main>
    <el-button type="primary" icon="Plus" size="default" @click="addBtn"
      >新增</el-button
    >
    <SysDialog
      :title="dialog.title"
      :width="dialog.width"
      :visible="dialog.visible"
      :height="dialog.height"
      @on-close="dialog.visible = false"
      @on-confirm="commit"
    >
      <template v-slot:content>
        <el-form :model="addModel" ref="addRef" :rules="rules">
          <el-form-item label="菜单类型" prop="type">
            <el-radio-group v-model="addModel.type">
              <el-radio :label="'0'"> 目录 </el-radio>
              <el-radio :label="'1'"> 菜单 </el-radio>
              <el-radio :label="'2'"> 按钮 </el-radio>
            </el-radio-group>
          </el-form-item>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="上级菜单" prop="pid">
                <el-tree-select
                  @check-change="treeClick"
                  v-model="addModel.pid"
                  :data="treelist"
                  :render-after-expand="true"
                  show-checkbox
                  check-strictly
                ></el-tree-select>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单名称" prop="title">
                <el-input v-model="addModel.title"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="addModel.type != '2'" :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单图标" prop="icon">
                <el-input v-model="addModel.icon"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="路由名称" prop="name">
                <el-input v-model="addModel.name"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <el-form-item label="菜单序号" prop="sort">
                <el-input v-model="addModel.sort"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12" :offset="0">
              <el-form-item label="权限字段" prop="code">
                <el-input v-model="addModel.code"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col v-if="addModel.type != '2'" :span="12" :offset="0">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="addModel.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col v-if="addModel.type === '1'" :span="12" :offset="0">
              <el-form-item label="组件路径" prop="url">
                <el-input v-model="addModel.url"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
    </SysDialog>
    <el-table
      :data="tableList"
      style="width: 100%; margin-top: 10px"
      border
      row-key="id"
      fit
    >
      <el-table-column label="菜单名称" prop="title"></el-table-column>
      <el-table-column label="菜单图标" prop="icon">
        <template #default="scope">
          <el-icon v-if="scope.row.icon">
            <component :is="scope.row.icon"></component>
          </el-icon>
        </template>
      </el-table-column>
      <el-table-column label="菜单类型" prop="type">
        <template #default="scope">
          <el-tag type="success" v-if="scope.row.type === 0"> 目录 </el-tag>
          <el-tag type="info" v-if="scope.row.type === 1"> 菜单 </el-tag>
          <el-tag type="danger" v-if="scope.row.type === 2"> 按钮 </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="上级菜单" prop="pidname"></el-table-column>
      <el-table-column label="路由名称" prop="name"></el-table-column>
      <el-table-column label="路由地址" prop="path"></el-table-column>
      <el-table-column label="组件地址" prop="url"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)" icon="Edit"
            >编辑</el-button
          >
          <el-button
            type="danger"
            @click="handleDelete(scope.row.id)"
            icon="Close"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-main>
</template>

<style scoped></style>
